<template>
  <div class="swipe_control">
    <div class="swipe_item col-md-1" v-if="screenWidth > 768">
      <button
        class="es-button es-button--text es-iconfont icon-arrow-left-bold"
        @click="swipeHandle(-1)"
      ></button>
    </div>
    <div
      class="swipe_item col-md-10"
      :class="screenWidth > 768 ? '' : 'col-md-12'"
      style="padding: 0"
    >
      <van-swipe
        class="swipe_box"
        :autoplay="0"
        indicator-color="white"
        @change="swipeChange"
        ref="swipe"
      >
        <van-swipe-item v-for="(item, index) in data" :key="index">
          <div class="swipe_box_item">
            <p>{{ item.desc }}</p>
            <strong>{{ item.auth }}</strong>
            <button class="es-button es-round swipe_button">
              Swipe Button
            </button>
          </div>
        </van-swipe-item>
      </van-swipe>
    </div>
    <div class="swipe_item col-md-1" v-if="screenWidth > 768">
      <button
        class="es-button es-button--text es-iconfont icon-arrow-right-bold"
        @click="swipeHandle(1)"
      ></button>
    </div>
  </div>
</template>

<script>
export default {
  name: "SwipeControl",
  props: {
    data: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  data() {
    return {
      screenWidth: 0,
    };
  },
  created() {
    this.screenWidth = screen.width;
    window.addEventListener("resize", this.reloadPage);
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.reloadPage);
  },
  methods: {
    reloadPage() {
      this.screenWidth = screen.width;
    },
    swipeChange(index) {
      this.currentPageIndex = index;
    },
    swipeHandle(n) {
      this.$refs["swipe"][n < 0 ? "prev" : "next"]();
    },
  },
};
</script>

<style lang="scss">
.swipe_control {
  clear: both;
  padding: 1rem 0 2rem 0;
  display: flex;
  .swipe_item {
    display: flex;
    justify-content: center;
    align-items: center;
    .swipe_box {
      .swipe_box_item {
        height: 16.25rem;
        background-color: var(--yellow);
        border-radius: 0.5rem;
        padding: 1rem;
        margin: 0 0.5rem;
        p {
          height: 10rem;
        }
        strong {
          height: 1.875rem;
          display: block;
        }
        .swipe_button {
          display: block;
        }
      }
    }
  }
}
</style>
